﻿﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<style type="text/css">
    .table>tbody>tr>td{
        text-align:center;
    }
</style>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>系统管理中心 <span class="c-gray en">&gt;</span> 账单管理
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <form id="myform" method="post">
        <div class="codeView docs-example">
            <input type="text" placeholder="账单编号" class="input-text radius size-L" style="width:250px" name="id" id="code">
            <input id = "ownerName" type="text" placeholder="业主名" class="input-text radius size-L" style="width:250px" name="id">
            <div class="form-group">
                <select class="form-control" style="width:250px" name="housingId" id="housingId">
                    <option value='' disabled selected style='display:none;'>所有小区</option>
                    <c:forEach items="${parentList}" var="item">
                        <option value="${item.id}">${item.name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="building" style="width:250px" id="building">
                    <option value='' disabled selected style='display:none;'>所有楼栋</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="unit" style="width:250px" id="unit">
                    <option value='' disabled selected style='display:none;'>所有单元</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" name="room" style="width:250px" id="room">
                    <option value='' disabled selected style='display:none;'>所有房间号</option>
                    <!-- <option></option> -->
                </select>
            </div>
            <!-- <div class="form-group">
                <select class="form-control" style="width:250px" name="roominfoId" id="roominfoId">
                    <option value=''>-请选择-</option>
                </select>
            </div> -->
            <div class="form-group">
                <select class="form-control shift-info" style="width:250px" name="costType" id="costType">
                    <option value=''>所有费用类型</option>
                    <c:forEach items="${costList}" var="item">
                        <option value="${item.id}" <c:if test="${query.costType==item.id }">selected</c:if>>${item.name}</option>
                    </c:forEach>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control shift-info" style="width:250px" name="ticketstatus" id="ticketstatus">
                    <option value=''>开票状态</option>
                    <option value="0" <c:if test="${query.ticketstatus == 0 }">selected</c:if>>未开票</option>
                    <option value="1" <c:if test="${query.ticketstatus == 1 }">selected</c:if>>已开票</option>
                    <option value="2" <c:if test="${query.ticketstatus == 2 }">selected</c:if>>退票</option>
                </select>
            </div>
            <br>
            <%--<div class="form-group" id="roomdoc">--%>
            <%--<select class="form-control shift-info" style="width:250px" name="roominfoId" id="roominfoId">--%>
            <%--<option value=''>所有房间</option>--%>
            <%--</select>--%>
            <%--</div>--%>
            <div class="form-group mt-20">
                <button type="button" class="btn btn-secondary radius size-L" onclick="query();">查&nbsp;询</button>
                <button type="button" class="btn btn-secondary radius size-L" onclick="approveAll();">批量开发票</button>
                <button type="button" class="btn btn-secondary radius size-L" onclick="downloadInvoiceList();">导出电子发票</button>
            </div>
        </div>

        <div class="panel panel-default mt-20">
            <div class="panel-header">
                数据列表
            </div>
            <div class="panel-body">
                <table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
                    <thead>
                    <tr class="text-c">
                        <th><input type="checkbox" disabled="disabled" name="ids" value=""></th>
                        <th>小区名称</th>
                        <th>完整门牌</th>
                        <th>账单编号</th>
                        <th>业主名</th>
                        <th>手机号</th>
                        <%--<th>身份证号</th>--%>
                        <th>费用类型</th>
                        <th>账期</th>
                        <th>金额</th>
                        <th>付款类型</th>
                        <th>付款时间</th>
                        <th>开票状态</th>
                        <th>税率</th>
                        <th>税额</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <%--<c:forEach items="${billaccountList}" var="item">
                        <tr class="text-c">
                            <td><input type="checkbox" name="ids" value="${ item.id }"></td>
                            <td>${ item.housingName }</td>
                            <td>${ item.roominfoAddress }</td>
                            <td>${ item.id }</td>
                            <td>${ item.ownerName }</td>
                            <td>${ item.ownerPhone }</td>
                            &lt;%&ndash;<td>${ item.ownerCard }</td>&ndash;%&gt;
                            <td>${ item.costTypeName }</td>
                            <td>${ item.acctPeriod }</td>
                            <td>${ item.billEntryAmount }</td>
                            <td>
                                <c:if test="${ item.paytype == 1 }">现金</c:if>
                                <c:if test="${ item.paytype == 2 }">支付宝</c:if>
                                <c:if test="${ item.paytype == 3 }">微信</c:if>
                                <c:if test="${ item.paytype == 4 }">POS机</c:if>
                                <c:if test="${ item.paytype == 5 }">银行转帐</c:if>
                                <c:if test="${ item.paytype == 6 }">抵用券</c:if>
                                <c:if test="${ item.paytype == 99 }">其他</c:if>
                            </td>
                            <td>${ item.invoiceserialnum }</td>
                            <td><fmt:formatDate value="${ item.paydate }"  pattern="yyyy-MM-dd HH:mm:ss"/></td>
                            <td>
                                <c:if test="${ item.ticketstatus == 0 }">未开票</c:if>
                                <c:if test="${ item.ticketstatus == 1}">已开票</c:if>
                                <c:if test="${ item.ticketstatus == 2 }">退票</c:if>
                            </td>
                            <td>
                                <c:if test="${ item.ticketstatus==0 }">
                                    <a title="开电子发票" style="text-decoration:none" onclick="approve(${item.id })" href="javascript:;" class="c-success">开电子发票</a><br>
                                </c:if>
                                <c:if test="${ item.ticketstatus==1 }">
                                    <a title="退票" style="text-decoration:none" onclick="reject(${item.id })" href="javascript:;" class="c-success">退票</a><br>
                                </c:if>
                            </td>
                        </tr>
                    </c:forEach>--%>
                    </tbody>
                </table>
                <br>
                <br>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    //选中小区触发事件
    /* $("#housingId").change(function(){
     var housingId = $("#housingId option:selected").val();
     //console.log(housingId);
     $.ajax({
     type:"post",
     url:"${pageContext.request.contextPath}/rest/roominfo/queryParentRoomById",
     data:{
     "housingId":housingId
     },
     success:function(data){
     //console.log(data);
     var html = "<option value=''>所有房间</option>";
     $.each(data,function(index,item){
     //					    console.log(item);
     html += "<option value="+item.id+">"+item.name+"</option>";
     })
     $("#roominfoId").html(html);
     }
     })
     }); */

    $(function(){
        queryList();
    })

    function queryList(){
        $(".table-sort").dataTable().fnDestroy();
        $(".table-sort").DataTable({
            bStateSave: false,
            aoColumnDefs: [{bSortable: false}],
            pageLength: 10,
            //aLengthMenu: [[10, 25, 50, -1]],
            searching: false,
            bFilter: false,
            bSort:false,
            bStateSave: false,
            aLengthMenu:[[10, 25, 50, 100], ["10条", "25条", "50条", "100条"]],
            serverSide:true,//实现后台分页
            lengthChange: true,
            bPaginate: true,
            ajax: {
                url: "${pageContext.request.contextPath}/rest/billAccount/tableInvoiceList",
                dataSrc: "data",
                data: function ( d ) {
                    d.id = $("#code").val();
                    d.ownerName = $("#ownerName").val();
                    d.housingId = $("#housingId option:selected").val();
                    /* d.roominfoId = $("#roominfoId option:selected").val(); */
                    d.costType = $("#costType option:selected").val();
                    d.building = $("#building option:selected").val();
                    d.unit = $("#unit option:selected").val();
                    d.room = $("#room option:selected").val();
                    d.ticketstatus = $("#ticketstatus option:selected").val();
                }
            },
            /*fnDrawCallback: function () {
             var api = this.api();
             api.column(0).nodes().each(function (cell, i) {
             cell.innerHTML = i + 1;
             });
             },*/
            aoColumns: [//列绑定
                {"data": "id"},
                {"data": "housingName"},
                {"data": "roominfoAddress"},
                {"data": "id"},
                {"data": "ownerName"},
                {"data": "ownerPhone"},
                {"data": "costTypeName"},
                {"data": "acctPeriod"},
                {"data": "billEntryAmount"},
                {"data": "paytype"},
                {"data": "paydate"},
                {"data": "ticketstatus"},
                {"data": "ticketstatus"},
                {"data": "ticketstatus"},
                {"data": "ticketstatus"}
            ],
            aoColumnDefs: [//列定义
                /*{
                 "aTargets": [0],
                 "mData": "id",
                 "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                 return "";
                 }
                 },*/{
                    "aTargets": [0],
                    "mData": "id",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return "<input type='checkbox' name='ids' value="+data+">";
                    }
                }, {
                    "aTargets": [1],
                    "mData": "housingName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [2],
                    "mData": "roominfoAddress",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [3],
                    "mData": "id",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [4],
                    "mData": "ownerName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [5],
                    "mData": "ownerPhone",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }

                }, {
                    "aTargets": [6],
                    "mData": "costTypeName",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [7],
                    "mData": "acctPeriod",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [8],
                    "mData": "billEntryAmount",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [9],
                    "mData": "paytype",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        if(data==1){
                            return "现金";
                        }else if(data==2){
                            return "支付宝";
                        }else if(data==3){
                            return "微信";
                        }else if(data==4){
                            return "POS机";
                        }else if(data==5){
                            return "银行转帐";
                        }else if(data==6){
                            return "抵用券";
                        }else if(data==99){
                            return "其他";
                        }else {
                            return "";
                        }
                    }
                }, {
                    "aTargets": [10],
                    "mData": "paydate",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return data;
                    }
                }, {
                    "aTargets": [11],
                    "mData": "ticketstatus",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        if(data == 0){
                            return "未开票";
                        }else if(data == 1){
                            return "已开票";
                        }else if(data == 2){
                            return "退票";
                        }
                    }
                }, {
                    "aTargets": [12],
                    "mData": "ticketstatus",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        return full.taxRate;
                    }
                }, {
                    "aTargets": [13],
                    "mData": "ticketstatus",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        var num1=full.billEntryAmount;
                        var num2=full.taxRate;
                        var baseNum = 0;
                        try {
                            baseNum += num1.toString().split(".")[1].length;
                        } catch (e) {
                        }
                        try {
                            baseNum += num2.toString().split(".")[1].length;
                        } catch (e) {
                        }
                        var amount= Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum);
                        return amount;
                    }
                }, {
                    "aTargets": [14],
                    "mData": "ticketstatus",
                    "mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        if(data == 0){
                            return "<a title='开电子发票' style='text-decoration:none' onclick='approve("+full.id+")' href='javascript:;' class='c-success'>开电子发票</a><br>"
                        }else if(data == 1){
                            return "<a title='退票' style='text-decoration:none' onclick='reject("+full.id+")' href='javascript:;' class='c-success'>退票</a><br>";
                        }else if(data == 2){
                            return "<a title='开电子发票' style='text-decoration:none' onclick='approve("+full.id+")' href='javascript:;' class='c-success'>开电子发票</a><br><a title='退票' style='text-decoration:none' onclick='reject("+full.id+")' href='javascript:;' class='c-success'>退票</a>"
                        }else {
                            return "";
                        }
                    }
                }
            ],
            language: {
                aria: {
                    sortAscending: ": activate to sort column ascending",
                    sortDescending: ": activate to sort column descending"
                },
                emptyTable: "没有数据",
                info: "从 _START_ 到 _END_ 共 _TOTAL_ 条",
                infoEmpty: "没有数据",
                infoFiltered: "(0 到 _MAX_ 条)",
                lengthMenu: " _MENU_",
                search: "查询:",
                zeroRecords: "没有数据",
                paginate: {previous: "<", next: ">", last: "最后一页", first: "第一页"}
            }
        })
    }
    function query() {
        queryList();
    }

    function approveAll() {
        var arrays=[];
        $('input[type="checkbox"]:checked').each(function(){
            var strNum = $(this).val();
            arrays.push(strNum);
        });
        if(arrays==""){
            layer.alert("请选择要批量开发票的选项");
            return;
        }else{
            var url="${pageContext.request.contextPath }/rest/page/invoiceBlue.do?ids="+arrays;
            layer_show('蓝票',url,800,500);
        }
    }

    function approve(id) {
        var url="${pageContext.request.contextPath }/rest/page/invoiceBlue.do?ids="+id;
        layer_show('蓝票',url,800,500);
    }

    function reject(id) {
        var url="${pageContext.request.contextPath }/rest/page/invoiceRed.do?id="+id;
        layer_show('冲红',url,800,500);
    }

    function downloadInvoiceList() {
        var url = "${pageContext.request.contextPath }/rest/billAccount/downloadInvoiceList";
        $('#myform').attr("action", url).submit();
    }

    //选中小区触发事件
    $("#housingId").change(function(){
        var parentId = $("#housingId option:selected").val();
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/rest/roominfo/queryBuildingByHousingId",
            data:{
                "parentId":parentId
            },
            success:function(data){
                var html = "<option value=''>所有楼栋</option>";
                $.each(data,function(index,item){
                    html += "<option value="+item.name+">"+item.name+"</option>";
                })
                $("#building").html(html);
            }
        })
    });

    //选中楼栋触发事件
    $("#building").change(function(){
        var parentId = $("#housingId option:selected").val();
        var building = $("#building option:selected").val();
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/rest/roominfo/queryUnitByBuilding",
            data:{
                "parentId":parentId,
                "building":building
            },
            success:function(data){
                var html = "<option value=''>所有单元</option>";
                $.each(data,function(index,item){
                    html += "<option value="+item.name+">"+item.name+"</option>";
                })
                $("#unit").html(html);
            }
        })
    });

    //选中房间号触发事件
    $("#unit").change(function(){
        var parentId = $("#housingId option:selected").val();
        var building = $("#building option:selected").val();
        var unit = $("#unit option:selected").val();
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/rest/roominfo/queryRoominfoIdByUnit",
            data:{
                "parentId":parentId,
                "building":building,
                "unit":unit
            },
            success:function(data){
                var html = "<option value=''>所有房间号</option>";
                $.each(data,function(index,item){
                    html += "<option value="+item.name+">"+item.name+"</option>";
                })
                $("#room").html(html);
            }
        })
    });
</script>